<!DOCTYPE html>
<html>
	<head>
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
		<meta charset="utf-8">
		<title>《原神》官方网站-全新3.0版本须弥开放</title>
		<link rel="icon" href="img/Genshin-ico.ico" type="images/x-ico">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
		
		<script src="js/index.js"></script>
		<style>
			

		</style>
	</head>
	<body>
		<div class="header-wrap">
			<div class="nav-l clearfix">
				<ul>
					<li>
						<button class="sdbtn" id="sounds">
							<!-- 设置链接不调懂但有链接小手效果等链接特性 -->
							<a href="javascript:">
								<!-- javascript:void(0)两者均可 -->
							<span id="img";">
								
								<img src="img/soundson.png" alt="">
								<audio autoplay="autoplay" loop="true" src="./media/video-bgm.d8637316.mp3" style="position: absolute; top: -1000px;"></audio>
								<audio autoplay="autoplay" loop="true" src="./media/video-play.06ec9738.mp3" style="position: absolute; top: -1000px;"></audio>
								
							</span>
							</a>
						</button>
					</li>
					
					<a href="javascript:" class="logo"></a>
					
					<li><a href="">首 页</a></li>
					<li><a href="">新 闻</a></li>
					<li><a href="">角 色</a></li>
					<li><a href="">世 界</a></li>
					<li><a href="">漫 画</a></li>
					<li><a href="">社 区</a></li>
					<div class="rolling"></div>
				</ul>
			</div>
				
			<div class="nav-r">
				<a href="">
					<span>登 录</span>
					<img src="img/login.png" alt="">
				</a>
					<!-- 登录模态框—————————————————————————————————————————————————— -->
				<a href="">
					<span>成长关爱系统</span>
					<img src="img/gplove.png" alt="">
				</a>
					
			</div>
		</div>
		
		<!-- 主题内容—————————————————————————————— -->
		<div class="content-wrap">
			<!-- width 与height设置视频宽高 muted静音 -->
			<video id="bgv" src="img/3e78e80.mp4" autoplay loop muted="muted" >
				<!-- <source src="img/3e78e80.mp4"/> -->
				
			</video>
			<a href="">
				<div class="cadpa">
				
				</div>
			</a>
			<div class="play_vedio">
				<button>
					<a href="javascript:">
						<div class="paused"></div>
					</a>
				</button>
			</div>
			<div class="ys-download-pc">
				<div class="q-code">
					<img src="img/poster/qr_code.png" height="102px" width="102px" alt="">
					<img src="img/poster/gsicon.jpg" class="code-h" alt="" srcset="">
				</div>
				
				
				<div class="centerbox">
					<a href=""><img src="img/poster/ps4.png" alt="" srcset=""></a>
					<a href=""><img src="img/poster/taptap.png" alt="" srcset=""></a>
					<a href=""><img src="img/poster/appstore.png" alt="" srcset=""></a>
					<a href=""><img src="img/poster/android.png" alt="" srcset=""></a>
				</div>
				<a href="" class="r-box">
					<img src="img/poster/pc.png" alt="" srcset="">
				</a>
			</div>
			<!-- poster-arrows未设置动画—————————————————————————1——— -->
			<div class="poster__arrows">
				<div class="poster__arrow poster__arrow-1"></div>
				<div class="poster__arrow poster__arrow-2"></div>
				<div class="poster__arrow poster__arrow-3"></div>
			</div>
		</div>
		
		<!-- new版面-->
		<div class="news-section">
			<h3 class="news-title">新闻资讯</h3>
			
			<!-- news内容----------------------------- -->
			<div class="news-content">
				<!-- 轮播图------------------------------>
				<div class="carousel">
					<div class="circle">
						<button type="button" class="active"></button>
						<button type="button"></button>
						<button type="button"></button>
						<button type="button"></button>
					</div>
					<div class="innerImg">
						<img src="img/news/newsbg1.jpg" alt="">
						<img src="img/news/newsbg2.jpg" alt="">
						<img src="img/news/newsbg3.jpg" alt="">
						<img src="img/news/newsbg4.jpg" alt="">
					</div>
				</div>
			<script>
				const btn=document.querySelectorAll('.carousel .circle>button')
				// console.log(btn)
				btn.forEach(value=>value.onclick=function(){
					btn.forEach(value=>value.classList.remove('active'))
					value.classList.add('active')
					const i=Array.prototype.indexOf.call(btn,this)
					// console.log(i)
					const img=this.parentElement.nextElementSibling
					// console.log(img)
					console.log(img.style)
					img.style.transform=`translateX(-${640*i}px)`
				})
			</script>
				
				<!-- 新闻列表 -------------------------------->
				<div class="news-list">
					<ul>
						<li class="active">最新</li>
						<li>新闻</li>
						<li>公告</li>
						<li>活动</li>
					</ul>
					<div>
						<ul>
							<li><a href="">《原神》寻味之旅——「璃月食集」第一期</a><span>2022/10/09</span></li>
							<li><a href="">行秋生日快乐｜接下来也要仰仗你了！</a><span>2022/10/09</span></li>
							<li><a href="">《原神》「百人一揆」活动即将开启</a><span>2022/10/08</span></li>
							<li><a href="">「回应心意之舞」——《原神》新角色：妮露分享H5正式上线</a><span>2022/10/08</span></li>
							<li><a href="">「有时候，舞蹈比语言更能传达出心情。」——「莲光落舞筵」·妮露</a><span>2022/10/07</span></li>
						</ul>
					</div>
				</div>
			</div>
			
			
		</div>
		
		<!-- 音频元素未定义—————————————————————————— -->
		<!-- muted输出为静音 perlod规定如何加载音频元素-->
		<!-- <audio src="media/video-bgm.d8637316.mp3" id="aud" controls autoplay preload="auto" loop></audio>
		<audio src="media/video-play.06ec9738.mp3" autoplay loop></audio> -->
		
			<script>
				var click=0

				sounds.onclick=function(){
					click++
					if (click%2!=0) {
						console.log('soundsoff');
						img.innerHTML=`
							<img src="img/soundsoff.png" alt="">
							`
					} else{
						console.log('soundson');
						img.innerHTML=`
							<img src="img/soundson.png" alt="">
							<audio autoplay="autoplay" loop="true" src="./media/video-bgm.d8637316.mp3" style="position: absolute; top: -1000px;"></audio>
							<audio autoplay="autoplay" loop="true" src="./media/video-play.06ec9738.mp3" style="position: absolute; top: -1000px;"></audio>
							`
					}
				}
				
			/* 	// 音频元素
				window.onload=function(){
					setInterval("toplay()",1);
				}
				function toplay() {
					var music=document.getElementById('aud')
					if(music.paused){
						music.paused=false
						// music.play()
					}
				} */
			</script>
	</body>
</html>